/* eslint-disable */
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import './index.css'

export default class Item extends Component {
	static propTypes = {
		id:PropTypes.string.isRequired,
		title:PropTypes.string.isRequired,
		done:PropTypes.bool.isRequired,
		checkTodo:PropTypes.func.isRequired,
		deleteTodo:PropTypes.func.isRequired
	}
	render() {
		//获取外部传进来的数据
		//eslint-disable-next-line
		const {id,done,title} = this.props
		return (
			<li>
				<label>
					<input type="checkbox" checked={done} onChange={this.handleCheck(id)}/>
					<span>{title}</span>
				</label>
				<button className="btn btn-danger" onClick={this.handleDelete(id)}>删除</button>
			</li>
		)
	}
	//勾选 or 取消勾选一个todo的回调
	handleCheck = (id)=>{
		return ({target})=>{
			this.props.checkTodo(id,target.checked)
		}
	}
	//删除一个todo的回调
	handleDelete = (id)=>{
		return ()=>{
			//提示
			//eslint-disable-next-line
			if(confirm('确定删除吗？')){
				this.props.deleteTodo(id)
			}
		}
	}
}
